<template>
  <div>
    <i-page-header class="product_tabs" title="单位管理"> </i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <div class="search-inner">
        <div class="fx-r fx-bc">
          <div class="label">姓名:</div>
          <div style="width: 130px" class="value">
            <el-input v-model="formValidate.name" placeholder="请输入姓名" />
          </div>

          <div class="label">所在单位:</div>
          <div style="width: 200px" class="value">
            <el-select
              v-model="formValidate.bumen_id"
              clearable
              placeholder="上一级"
              style="width: 100%"
            >
              <el-option
                :label="item.html + item.name"
                :value="item.id"
                :key="item.id"
                v-for="item in bumenAr"
              ></el-option>
            </el-select>
          </div>

          <div class="label">创建时间:</div>
          <div style="width: 210px" class="value">
            <DatePicker
              v-model="formValidate.timeVal"
              format="yyyy/MM/dd"
              type="datetimerange"
              placement="bottom-start"
              placeholder="自定义时间"
              style="width: 210px"
              class="mr20"
            ></DatePicker>
          </div>

          <div class="value">
            <el-button @click="tapSearch" type="primary" icon="el-icon-zoom-in"
              >搜索</el-button
            >
          </div>
          <div class="fx-g1"></div>
          <Button
            class="bnt"
            icon="ios-share-outline"
            style="margin-right: 10px"
            @click="exports"
            >导出人员</Button
          >

          <Button type="primary" class="bnt" icon="md-add" @click="tapAdd"
            >添加人员</Button
          >
        </div>

        <div class="fx-r fx-bc" style="display: none">
          <div class="fx-g1"></div>
          导出EXCEL，导入Excel
        </div>
      </div>
    </Card>

    <Card :bordered="false" dis-hover class="ivu-mt">
      <el-table
        :data="listData"
        :max-height="elMain - 220"
        v-loading="loading"
        style="margin-top: 10px"
        border
        row-key="id"
      >
        <el-table-column label="序" align="center" prop="name" width="80px">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="手机号码" align="center" prop="mobile">
        </el-table-column>

        <el-table-column label="姓名" align="center" prop="name">
        </el-table-column>

        <el-table-column label="人员照片" width="100" align="center">
          <template #default="scope">
            <div
              v-if="scope.row.avatar == '' || scope.row.avatar == null"
              class="img-logo"
            ></div>
            <el-image
              v-else
              fit="cover"
              v-image-preview
              style="cursor: pointer; width: 60px"
              :src="scope.row.avatar"
              v-lazy="scope.row.avatar"
            />
          </template>
        </el-table-column>

        <el-table-column label="组织部门" align="center" prop="bumen_name">
        </el-table-column>

        <el-table-column label="创建时间" align="center" prop="regtime">
        </el-table-column>

        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template #default="scope">
            <a @click="tapEdit(scope.row.uid)">编辑</a>
            <Divider type="vertical" />
            <a @click="tapDel(scope.row.uid)">删除</a>
          </template>
        </el-table-column>
      </el-table>

      <div class="acea-row row-right page">
        <Page
          :total="page.count"
          show-elevator
          show-total
          @on-change="tapPage"
          :page-size="page.pageSize"
        />
      </div>
    </Card>

    <!--修改信息-->
    <el-dialog
      :visible.sync="dialogVisible"
      title="新增/编辑"
      :close-on-click-modal="false"
      width="480px"
    >
      <el-form :model="form" ref="form" label-width="100px">
        <el-row :space="24">
          <el-col :span="24">
            <el-form-item
              label="姓名"
              prop="name"
              :rules="[{ required: true, message: '请输入姓名' }]"
            >
              <div class="fx-r">
                <el-input
                  type="text"
                  placeholder="请输入姓名"
                  v-model="form.name"
                ></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :space="24">
          <el-col :span="24">
            <el-form-item
              label="手机号码"
              prop="mobile"
              :rules="[{ required: true, message: '请输入手机号码' }]"
            >
              <div class="fx-r">
                <el-input
                  type="text"
                  placeholder="请输入手机号码"
                  v-model="form.mobile"
                ></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :space="24">
          <el-col :span="24">
            <el-form-item label="照片">
              <ui-upload
                :upUrl="upUrl"
                :img="form.avatar"
                fileName="上传照片"
                :headers="upHeaders"
                @onUpload="handleAvatarSuccess"
              ></ui-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :space="24">
          <el-col :span="24">
            <el-form-item
              label="所在单位"
              prop="bumen_id"
              :rules="[{ required: true, message: '请选择所在单位' }]"
            >
              <div class="fx-r">
                <el-select
                  v-model="form.bumen_id"
                  placeholder="所在单位"
                  style="width: 100%"
                >
                  <el-option
                    :label="item.html + item.name"
                    :value="item.id"
                    :key="item.id"
                    v-for="item in bumenAr"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer fx-r fx-ae">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subAdmin">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="打开二维码"
      :visible.sync="dialogVisible3"
      width="250px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="fx-r fx-bc fx-ac">
        <div
          class="bqrcode"
          id="bqrcode"
          style="width: 200px; height: 200px"
        ></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IPageHeader from '@/layouts/system/page-header/index'
import { mapState, mapActions } from 'vuex'
import UiUpload from '@/ui/upload/index'
import Setting from '@/setting'
import QRCode from 'qrcodejs2'
import util from '../../../libs/util'
import {
  SystemMemberDel,
  SystemMemberInfo,
  SystemMemberList,
  SystemMemberListDown,
  SystemMemberSave,
} from '../../../api/system/member'
import { SystemBumenClassTree } from '../../../api/system/bumen'
import { export_json_to_excel } from '../../../libs/Export2Excel'
export default {
  name: 'system_bumen_index',
  components: { UiUpload, IPageHeader },
  computed: {
    ...mapState('pub/layout', ['elMain']),
  },
  data() {
    return {
      bankAr: [],
      dialogVisible: false,
      dialogVisible3: false,
      loading: false,
      listData: [],

      bumenAr: [],

      upHeaders: {},
      upUrl: '',
      page: {
        count: 0, //一共多少数量
        pageSize: 0, //每一页码数量
        page: 1, //当前页码
      },
      type: 1,
      formValidate: { title: '' },
      form: {
        avatar: '',
      },
    }
  },
  mounted() {
    this.initView()
  },
  methods: {
    initView: function () {
      var upHeaders = {}
      //上传路径
      this.upUrl = Setting.apiBaseURL + '/systemv1/upload/index'
      //上传header数据
      const token = util.cookies.get('system_token')
      if (token) {
        upHeaders['SYSTEM-ACC-TOKEN'] = token
      }
      this.upHeaders = upHeaders

      SystemBumenClassTree().then((res) => {
        if (res.code == 200) {
          this.bumenAr = res.data
        }
      })

      this.getData()
    },
    /**
     * 获取数据
     */
    getData: function () {
      this.$utils.loading(this, '获取数据中...')
      SystemMemberList({
        ...this.formValidate,
        page: this.page.page,
        type: this.type,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.listData = res.data.list
            this.page.pageSize = res.data.pageSize
            this.page.count = res.data.pageCount
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    tapSearch() {
      this.page.page = 1
      this.getData()
    },

    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getData()
    },

    tapEdit: function (id) {
      this.$utils.loading(this, '获取数据中...')
      SystemMemberInfo({
        uid: id,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.form = res.data
            this.dialogVisible = true
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    tapDel(uid) {
      this.$confirm('此操作将永久删除人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '删除数据中...')
        SystemMemberDel({ uid: uid })
          .then((res) => {
            this.$utils.loadingClose()
            if (res.code == 200) {
              this.getData()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },
    /**
     * 提交数据修改
     */
    subAdmin: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$utils.loading(this, '提交数据中...')
          SystemMemberSave(this.form)
            .then((res) => {
              this.$utils.loadingClose()
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success',
                })
                this.getData()
                this.dialogVisible = false
              } else {
                this.$alert(res.msg)
              }
            })
            .catch((err) => {
              this.$utils.loadingClose()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        }
      })
    },

    /**
     * 添加新管理人员
     */
    tapAdd: function () {
      this.dialogVisible = true

      this.form = this.$utils.resetFields(this.form, { status: 1 })
    },

    //上传头像
    handleAvatarSuccess: function (res) {
      if (res.code == -1) {
        this.$Notice.error({
          title: '系统提示',
          content: res.msg,
        })
      } else {
        this.form.avatar = res.data.img
      }
    },
    tapQrcode: function (i) {
      this.dialogVisible3 = true
      setTimeout(() => {
        document.getElementById('bqrcode').innerHTML = ''
        let qrcode = new QRCode('bqrcode', {
          width: 200,
          height: 200,
          text: this.listData[i].qrcode,
        })
      }, 200)
    },

    // 导出
    exports() {
      this.$utils.loading(this, '获取数据中...')
      SystemMemberListDown({
        ...this.formValidate,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            import('@/libs/Export2Excel').then((excel) => {
              const tHeader = ['姓名', '人员照片', '所在单位', '创建时间']
              const filterVal = ['name', 'img', 'bumen_name', 'time']
              var data = this.$utils.formatJson(filterVal, res.data)

              var filename = '人员信息'
              export_json_to_excel({
                header: tHeader,
                data,
                filename,
              })
            })
          } else {
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          }
        })
        .catch((err) => {})
    },
  },
}
</script>
<style scoped>
.search-inner {
  height: 40px;
}
</style>
